<template>
  <div>
    <div class="beachTable">
      <el-table
        style="width: 100%"
        border
        :data="list"
        text-align="center"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        size="small"
      >
        <el-table-column prop="monitorCode" label="测点编号"> </el-table-column>
        <el-table-column prop="monitorName" label="测点名称"></el-table-column>
        <el-table-column
          prop="data"
          label="数值"
        ></el-table-column>
        <el-table-column prop="theDate" label="测量时间"></el-table-column>
      </el-table>
    </div>
    <!-- <div id="beachCharts" class="beach"></div> -->
  </div>
</template>

<script>
import axios from 'axios'
import {getLevelDataListrain} from '../../../api/Monitoring'
import moment from 'moment'
export default {
  name: 'SeepageLine',
  components: {},
  props: {
    node: Object
  },
  data () {
    return {
       list:[],
       realDataInterVal:null
    }
  },
    methods: {
      async getList(){
        const res = await getLevelDataListrain({monitorCode:this.node.monitorCode,count:17})
        console.log(res);
        if(res.resultCode == '200'){
          this.list = res.parameter
        }else if(res.resultCode == '204'){
          this.list = []
        }else{
          this.$message(res.message)
        }

      }
  },
  mounted () {
    this.getList()
    console.log(this.node);


    // var myChart = echarts.init(document.getElementById('beachCharts'));

    // var timeData = ['2020/10/10 2:00', '2020/10/10 3:00', '2020/10/10 4:00', '2020/10/102 5:00', '2020/10/10 6:00', '2020/10/10 7:00', '2020/10/10 8:00', '2020/10/10 9:00', '2020/10/10 10:00', '2020/10/10 11:00', '2020/10/10 12:00', '2020/10/10 13:00', '2020/10/10 14:00', '2020/10/10 15:00', '2020/10/10 16:00', '2020/10/1017:00', '2020/10/1018:00', '2020/10/1019:00', '2020/10/1020:00', '2020/10/1021:00', '2020/10/1022:00', '2020/10/1023:00',
    //   '2020/10/11 0:00', '2020/10/11 1:00', '2020/10/11 2:00', '2020/10/11 3:00', '2020/10/11 4:00', '2020/10/11 5:00', '2020/10/11 6:00', '2020/10/11 7:00', '2020/10/11 8:00', '2020/10/11 9:00', '2020/10/11 10:00', '2020/10/11 11:00', '2020/10/11 12:00', '2020/10/11 13:00', '2020/10/11 14:00', '2020/10/11 15:00', '2020/10/11 16:00', '2020/10/11 17:00', '2020/10/11 18:00', '2020/10/11 19:00', '2020/10/11 20:00', '2020/10/11 21:00', '2020/10/11 22:00', '2020/10/11 23:00',
    //   '2020/10/12 0:00', '2020/10/12 1:00', '2020/10/12 2:00', '2020/10/12 3:00', '2020/10/12 4:00', '2020/10/12 5:00', '2020/10/12 6:00', '2020/10/12 7:00', '2020/10/12 8:00', '2020/10/12 9:00', '2020/10/12 10:00', '2020/10/12 11:00', '2020/10/12 12:00', '2020/10/12 13:00', '2020/10/12 14:00', '2020/10/12 15:00', '2020/10/12 16:00', '2020/10/12 17:00', '2020/10/12 18:00', '2020/10/12 19:00', '2020/10/12 20:00', '2020/10/12 21:00', '2020/10/12 22:00', '2020/10/12 23:00',
    //   '2020/10/13 0:00', '2020/10/13 1:00', '2020/10/13 2:00', '2020/10/13 3:00', '2020/10/13 4:00', '2020/10/13 5:00', '2020/10/13 6:00', '2020/10/13 7:00', '2020/10/13 8:00', '2020/10/13 9:00', '2020/10/13 10:00', '2020/10/13 11:00', '2020/10/13 12:00', '2020/10/13 13:00', '2020/10/13 14:00', '2020/10/13 15:00', '2020/10/13 16:00', '2020/10/13 17:00', '2020/10/13 18:00', '2020/10/13 19:00', '2020/10/13 20:00', '2020/10/13 21:00', '2020/10/13 22:00', '2020/10/13 23:00',];

    // timeData = timeData.map(function (str) {
    //   return str.replace('2009/', '');
    // });
    // const that = this;
    // const option = {
    //   title: {
    //     text: `浸润线高度变化图#${that.node.label}`,
    //     left: 'center'
    //   },
    //   tooltip: {
    //     trigger: 'axis'
    //   },
    //   legend: {
    //     data: ['浸润线高度'],
    //     left: 'right'
    //   },
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: timeData,
    //     name: '时间'

    //   },
    //   yAxis: {
    //     type: 'value',
    //     name: '浸润线高度(m)',
    //     min: '8',
    //     max: '12',
    //     splitNumber: 3,
    //     minorTick: {
    //       show: true,
    //       splitNumber: 3
    //     },
    //     //坐标轴在 grid 区域中的分隔线
    //     splitLine: {
    //       show: false
    //     }
    //   },
    //   series: [{
    //     name: '浸润线埋深',
    //     data: [
    //       10.12,
    //       10.28,
    //       10.13,
    //       10.21,
    //       10.15,
    //       10.25,
    //       10.26,
    //       10.14,
    //       10.27,
    //       10.28,
    //       10.12,
    //       10.17,
    //       10.11,
    //       10.10,
    //       10.13,
    //       10.18,
    //       10.14,
    //       10.19,
    //       10.10,
    //       10.14,
    //       10.10,
    //       10.11,
    //       10.10,
    //       10.12,
    //       10.11,
    //       10.27,
    //       10.11,
    //       10.14,
    //       10.19,
    //       10.15,
    //       10.15,
    //       10.12,
    //       10.23,
    //       10.18,
    //       10.10,
    //       10.26,
    //       10.22,
    //       10.15,
    //       10.11,
    //       10.11,
    //       10.19,
    //       10.13,
    //       10.18,
    //       10.14,
    //       10.13,
    //       10.11,
    //       10.23,
    //       10.19,
    //       10.12,
    //       10.27,
    //       10.14,
    //       10.16,
    //       10.13,
    //       10.10,
    //       10.14,
    //       10.12,
    //       10.27,
    //       10.20,
    //       10.18,
    //       10.21,
    //       10.11,
    //       10.17,
    //       10.17,
    //       10.16,
    //       10.12,
    //       10.10,
    //       10.10,
    //       10.28,
    //       10.10,
    //       10.12,
    //       10.11,
    //       10.27,
    //       10.11,
    //       10.14,
    //       10.19,
    //       10.15,
    //       10.15,
    //       10.12,
    //       10.23,
    //       10.18,
    //       10.10,
    //       10.26,
    //       10.22,
    //       10.15,
    //       10.11,
    //       10.11,
    //       10.19,
    //       10.13,
    //       10.18,
    //       10.14,
    //       10.13,
    //       10.11,
    //       10.23,
    //       10.19,
    //       10.12,
    //       10.27,
    //       10.19,
    //       10.12,
    //       10.27],
    //     type: 'line'
    //   }]
    // };

    // myChart.setOption(option);
  },

  computed: {

  },
  watch: {

  }
}
</script>

<style scoped>
.beach {
  /* width: 1000px; */
  height: 50vh;
  margin-top: 20px;
  width: 100%;
  /* margin: 0 auto; */
}
.beachTable {
  height: 32vh;
  /* margin-top: 50px; */
}
.beachTable >>> .el-table tr:nth-child(odd) {
  /* background: pink; */
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
.beachTable >>> .el-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.05);
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
</style>